<template>
  <div class="role-menu">
    <dialog-content :dialogOptions="dialogOptions || (new Date().getTime())">
      <template slot="dialog-content_content">
        <form-content ref="roleMenuForm" :formOptions="formOptions" :formSource="formSource" @changeHandle="changeHandle">
        </form-content>
      </template>
      <template slot="dialog-content_footer">
        <el-button v-if="isAuth('sys:role:save')" type="primary" :size="this.size" v-prevent-re-click @click="submitHandle('save')">保 存</el-button>
        <el-button :size="this.size" @click="dialogOptions.show = false">取 消</el-button>
      </template>
    </dialog-content>
  </div>
</template>

<script>
import DialogContent from '@/components/common/dialog-content'
import FormContent from '@/components/common/form-content'
import { saveRoleMenuApi, getRoleBelowMenuTreeApi } from '@/api/role'
export default {
  components: { DialogContent, FormContent },
  props: {
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      dialogOptions: {
        title: '角色菜单绑定',
        show: false,
        modal: true,
        width: '350px',
        height: '150px',
        center: true
      },
      formOptions: {
        inline: true,
        labelPosition: 'right',
        labelWidth: '90px',
        labelSuffix: '',
        size: this.size
      },
      formSource: {
        operations: [
          {
            name: '角色名称',
            key: 'roleName',
            type: 'text',
            width: '200px',
            length: 20,
            disabled: true
          },
          {
            name: '已选菜单',
            key: 'menus',
            type: 'tag',
            formWidth: '290px',
            tagClosable: true
          },
          {
            name: '选择菜单',
            key: 'menuTree',
            type: 'cascader',
            cascaderProps: { checkStrictly: true },
            width: '200px',
            cascaderOptions: []
          }
        ],
        ruleForm: {},
        rules: {
          menus: [{ required: true, message: '请选择菜单', trigger: 'blur' }]
        }
      }
    }
  },
  created() {},
  computed: {},
  methods: {
    init(node = {}) {
      this.formSource.ruleForm = {
        roleId: node.id,
        roleName: node.label,
        menuIds: [],
        menuName: '',
        menus: []
      }
      this.getRoleTree()
      this.dynamicHeight(true)
    },
    dynamicHeight(init) {
      let menus = this.formSource.ruleForm['menus']
      let tagLength = 0
      menus.forEach(item => {
        tagLength += item.key.length
      })
      let height = this.dialogOptions.height
      height = height.substr(0, height.length - 2)

      if (menus.length > 2) {
        height = Math.ceil(tagLength / 12) * 25 + 150
      } else if (menus.length === 2) {
        height = 150
      } else {
        if (init) {
          height = 150
        }
      }
      this.dialogOptions.height = height + 'px'
    },
    getRoleTree() {
      getRoleBelowMenuTreeApi(this.formSource.ruleForm.roleId).then(res => {
        this.formSource.operations.forEach(item => {
          if (item.key === 'menuTree') {
            item.cascaderOptions = this.treeFormat(res.data, 'id', 'name', 'subMenus', false, true, 'use', 'disabled')
          }
        })
      })
    },
    changeHandle(obj) {
      let _item = obj.backData
      if (_item.key !== 'menuTree' && _item.key !== 'menus') {
        return
      }
      if (_item.key === 'menuTree') {
        this.menuTreeData(_item, obj._index)
      } else if (_item.key === 'menus') {
        this.dynamicHeight()
      }
    },
    menuTreeData(_item, _index) {
      this.$refs.roleMenuForm.clearValidate()
      let menuTreeValues = this.formSource.ruleForm[_item.key]
      if (menuTreeValues === undefined || menuTreeValues.length === 0) {
        return
      }
      let menuTreeOptions = this.formSource.operations[_index].cascaderOptions
      let targetMenuTreeIndex = menuTreeValues.length - 1
      let item = this.treeRetrieval(menuTreeOptions, 'value', menuTreeValues[targetMenuTreeIndex], 'children')

      let menus = this.formSource.ruleForm['menus']
      let flag = false
      menus.forEach(i => {
        if (i.value === item.value) {
          flag = true
        }
      })
      if (!flag) {
        menus.push({ key: item.label, value: item.value })
        this.dynamicHeight()
      }
    },
    submitHandle(type) {
      if (!this.$refs.roleMenuForm.submitForm()) return false

      this.formSource.ruleForm.menuIds = this.formSource.ruleForm.menus.map(item => item.value)
      saveRoleMenuApi(this.formSource.ruleForm.roleId, this.formSource.ruleForm.menuIds).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 1500
        })
        this.dialogOptions.show = false
        this.$emit('flushMenu')
      }).catch(() => {
        this.$message({
          message: '添加失败',
          type: 'error',
          duration: 1500
        })
      })
    }
  }
}
</script>

<style lang="scss">
.role-menu {
  .form-content {
    &__form {
      .el-form-item {
        &__error {
          display: contents;
        }
      }
    }
  }
}
</style>
